<template>
    <div class="authority">
        <div class="bglxx">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="addLouDong">新增</el-button>
            </div>
            <template v-if="ldData.length > 0">
                <div class="tabs">
                    <div v-for="(item, index) in ldTabs" :class="currentIndex == index ? 'tab active' : 'tab'"
                        @click="changeTab(index)">{{ item }}</div>
                </div>
                <div class="title-box">
                    <div class="left">
                        <span class="title">{{ ldData[currentIndex].name }}</span>
                        <span style="color: #999999;font-size: 16px;">{{ ldData[currentIndex].areaAddress }}</span>
                    </div>
                    <div class="right">
                        <el-button type="danger" link icon="delete" @click="delUnit(ldData[currentIndex])">
                            删除
                        </el-button>
                    </div>
                </div>
                <div class="content">
                    <img v-if="ldData[currentIndex].picture" :src="ldData[currentIndex].picture" alt="" class="img">
                    <img v-else src="@/assets/no-loudong.png" alt="" class="img">
                    <div class="right">
                        <div class="jbxx">
                            <div class="row1">办公楼基本信息</div>
                            <div class="row2">
                                <div class="item">
                                    <div class="label">办公楼结构</div>
                                    <div class="value">{{ buildingStructs[ldData[currentIndex].buildingStruct - 1].label
                                        }}</div>
                                </div>
                                <div class="item">
                                    <div class="label">建筑面积</div>
                                    <div class="value"><span>{{ ldData[currentIndex].totalArea }}</span> m²</div>
                                </div>
                                <div class="item">
                                    <div class="label">层数</div>
                                    <div class="value">{{ ldData[currentIndex].totalFloor }}</div>
                                </div>
                                <div class="item">
                                    <div class="label">建设年代</div>
                                    <div class="value">{{ ldData[currentIndex].createYear }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="syxx">
                            <div class="row1">单位使用信息</div>
                            <div class="row2">
                                <div class="item" v-for="item in ldData[currentIndex].unitRoomArea">
                                    <div class="label">{{ item.roomType }}</div>
                                    <div class="value">{{ item.area }} m²</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btns">
                    <div class="item" @click="editLouDong(ldData[currentIndex])">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/AVh3TQ6lZY_icon1.jpg" alt="" class="icon">
                        <div>基本信息</div>
                    </div>
                    <div class="item" @click="openQuanShu(ldData[currentIndex].buildingId)">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/cXvOsDAPz0_icon2.jpg" alt="" class="icon">
                        <div>权属信息</div>
                    </div>
                    <div class="item" @click="openWeiZhi(ldData[currentIndex])">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/XF7uCNOsX2_icon3.jpg" alt="" class="icon">
                        <div>地图定位</div>
                    </div>
                    <div class="item" @click="openWaiGuan(ldData[currentIndex])">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/LFo1Siegv9_icon5.jpg" alt="" class="icon">
                        <div>办公楼外观图</div>
                    </div>
                    <div class="item" @click="openWuYe(ldData[currentIndex])">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/JsDDxqGth7_icon6.jpg" alt="" class="icon">
                        <div>物业信息</div>
                    </div>
                </div>
            </template>
        </div>
        <!-- 新增楼栋 -->
        <el-drawer v-model="dialog1" :size="1200" :before-close="handleClose1" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialog1Title }}</span>
                    <div>
                        <el-button @click="closeDialog1">取消</el-button>
                        <el-button type="primary" @click="enterDialog">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialog1" ref="loudongForm" label-width="150" :model="form" :rules="rules">
                <div class="section-title">选择办公楼</div>
                <el-form-item label="选择办公区" prop="areaId">
                    <el-select :disabled="isEdit" v-model="form.areaId" placeholder="请选择" style="width: 360px"
                        @change="changeArea">
                        <el-option v-for="item in qyList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择办公楼" prop="buildingId">
                    <el-select :disabled="isEdit" v-model="form.buildingId" placeholder="请选择" style="width: 360px"
                        @change="changeBgl">
                        <el-option v-for="item in bglList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择楼层" prop="floorIds">
                    <el-checkbox-group v-model="form.floorIds">
                        <el-checkbox v-for="item in lcList" :label="item.floor" :value="item.id" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="使用情况" prop="useState">
                    <el-select v-model="form.useState" placeholder="请选择" style="width: 360px">
                        <el-option v-for="item in syqkList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <div class="section-title">办公楼信息</div>
                <el-form-item label="权属登记情况" prop="ownership">
                    <el-select v-model="form.ownership" placeholder="请选择" style="width: 360px" disabled>
                        <el-option v-for="item in qsdjList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="areaAddress">
                    <el-input disabled :value="form.areaAddress" style="width: 360px"></el-input>
                </el-form-item>
                <el-form-item label="总建筑面积" prop="totalArea">
                    <el-input v-model="form.totalArea" disabled style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <div style="color: #FF473E;margin: 0px 0 10px 160px;">注：总建筑面积是指在建设用地范围内单栋或多栋建筑物地面以上及地面以下各层建筑面积之和</div>

                <el-form-item label="占地面积" prop="coverArea">
                    <el-input v-model="form.coverArea" disabled style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <div style="color: #FF473E;margin: 0px 0 10px 160px;">注：占地面积是指经规划许可和施工许可的建筑物实际占用土地的面积</div>
                <el-form-item label="地上层数" prop="overgroundFloor">
                    <el-input v-model.number="form.overgroundFloor" disabled placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">层</span>
                </el-form-item>
                <el-form-item label="地下层数" prop="undergroundFloor">
                    <el-input v-model.number="form.undergroundFloor" disabled placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">层</span>
                </el-form-item>
                <el-form-item label="总层数">
                    <el-input :value="form.totalFloor" style="width: 360px" disabled />
                    <span style="margin-left: 4px;">层</span>
                </el-form-item>
                <el-form-item label="建设年代">
                    <el-input :value="form.createYear" style="width: 360px" disabled />
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 权属信息列表 -->
        <el-drawer v-model="dialog2" :size="1200" :before-close="handleClose2" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">权属信息</span>
                    <div>
                        <el-button @click="dialog2 = false">取消</el-button>
                        <el-button type="primary" @click="addQuanShu">新增</el-button>
                    </div>
                </div>
            </template>
            <div class="section-title">证书信息</div>
            <el-table :data="quanshuData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="产权证号" prop="certificateNo" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" label="权利人" prop="obligee"></el-table-column>
                <el-table-column align="left" label="共有情况">
                    <template #default="scope">
                        <span>{{ scope.row.commonSituation == 1 ? '共同共有' : '单独所有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="不动产单元号" prop="realEstateUnitNo" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="100">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" @click="editQuanShu(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link icon="delete" @click="delQuanShu(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <!-- 新增权属信息 -->
        <el-drawer v-model="dialog3" :size="1200" :before-close="handleClose3" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ quanshuTitle }}</span>
                    <div>
                        <el-button @click="closeDialog3"> 取 消 </el-button>
                        <el-button type="primary" @click="enterDialog3"> 确 定 </el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialog3" ref="quanshuForm" label-width="150" :model="quanshuForms" :rules="quanshuRules">
                <div class="quanshu-top">
                    <div class="section-title">
                        <div>不动产权证信息</div>
                    </div>
                    <div style="color: #ff6666;">注：基本信息(按《不动产权证书》证书上的信息填写)</div>
                </div>
                <el-form-item label="产权证号" prop="certificateNo">
                    <el-input v-model="quanshuForms.certificateNo" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">如：渝2023 xx市不动产权第0000001号</span>
                </el-form-item>
                <el-form-item label="权利人" prop="obligee">
                    <el-input v-model="quanshuForms.obligee" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="共有情况" prop="commonSituation">
                    <el-select v-model="quanshuForms.commonSituation" placeholder="请选择" style="width: 360px">
                        <el-option label="共同共有" :value="1" />
                        <el-option label="单独所有" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="不动产单元号">
                    <el-input v-model="quanshuForms.realEstateUnitNo" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="权利类型">
                    <el-input v-model="quanshuForms.rightType" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="权利性质">
                    <el-input v-model="quanshuForms.rightNature" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="用途">
                    <el-input v-model="quanshuForms.purpose" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="土地使用权面积">
                    <el-input v-model="quanshuForms.landUseRightArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">单位：平方米</span>
                </el-form-item>
                <el-form-item label="房屋建筑面积" prop="buildingArea">
                    <el-input v-model="quanshuForms.buildingArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">单位：平方米</span>
                </el-form-item>
                <el-form-item label="使用期限">
                    <el-input v-model="quanshuForms.serviceLife" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">注：请填写使用期限</span>
                </el-form-item>
                <el-form-item label="权利其他状况">
                    <el-input v-model="quanshuForms.otherRight" type="textarea" :rows="6" style="width: 360px;" />
                </el-form-item>
                <div class="section-title">附件信息</div>
                <el-form-item label="产权证">
                    <el-upload v-model:file-list="fileList1" :action="adminUrl" :on-success="uploadSuccess1"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove1(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="宗地图">
                    <el-upload v-model:file-list="fileList2" :action="adminUrl" :on-success="uploadSuccess2"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove2(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分户图">
                    <el-upload v-model:file-list="fileList3" :action="adminUrl" :on-success="uploadSuccess3"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove3(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="二维码">
                    <el-upload v-model:file-list="fileList4" :action="adminUrl" :on-success="uploadSuccess4"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove4(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 位置信息 -->
        <el-drawer v-model="weizhiDialog" :size="1200" :before-close="handleClose6" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">地图定位</span>
                    <div>
                        <el-button @click="closeDialog6">取消</el-button>
                    </div>
                </div>
            </template>
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="地址">
                    <el-input v-model="mapInfo.address" id="tipinput"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="mapInfo.lng"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="mapInfo.lat"></el-input>
                </el-form-item>
            </el-form>
            <div id="container"></div>
        </el-drawer>

        <!-- 新增外观图 -->
        <el-drawer v-model="waiguanVisible" :size="appStore.drawerSize" :before-close="handleClose4" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">外观图</span>
                    <div>
                        <el-button @click="closeDialog4">取消</el-button>
                        <el-button type="primary" @click="enterDialog4">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="waiguanVisible" ref="waiguanForm" label-width="150" :model="waiguanForms"
                :rules="waiguanRules">
                <el-form-item label="办公楼图片" prop="picture">
                    <el-upload v-model:file-list="fileList5" :action="adminUrl" :on-success="uploadSuccess5"
                        :headers="headerOdj" list-type="picture-card" :on-preview="handlePicturePreview">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
            </el-form>
        </el-drawer>
        
         <!-- 物业信息列表 -->
         <el-drawer v-model="dialog4" :size="1200" :before-close="handleClose7" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">物业信息</span>
                    <div>
                        <el-button @click="dialog4 = false">取消</el-button>
                        <el-button type="primary" @click="addWuYe">新增</el-button>
                    </div>
                </div>
            </template>
            <div class="section-title">物业信息</div>
            <el-table :data="wuyeData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="物业服务单位名称" prop="name"></el-table-column>
                <el-table-column align="left" label="物业类型" prop="managerType">
                    <template #default="scope">
                <span>{{ scope.row.managerType==1?'自管':'第三方物业单位' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="100">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" @click="editWuYe(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link icon="delete" @click="delWuYe(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <!-- 物业信息 -->
        <el-drawer v-model="wuyeVisible" :size="1200" :before-close="handleClose5" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">物业信息1</span>
                    <div>
                        <el-button @click="closeDialog5">取消</el-button>
                        <el-button type="primary" @click="enterDialog5">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="wuyeVisible" ref="wuyeForm" label-width="150" :model="wuyeForms" :rules="wuyeRules">
                <div class="section-title">物业基本信息</div>
                <el-form-item label="物业管理类型" prop="managerType">
                    <el-radio-group v-model="wuyeForms.managerType" class="ml-4">
                        <el-radio :value="1" size="large">自管</el-radio>
                        <el-radio :value="2" size="large">第三方物业单位</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="物业服务单位名称" prop="name">
                    <el-input v-model="wuyeForms.name" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">注：请填写注册的物业服务单位的全称</span>
                </el-form-item>
                <el-form-item label="物业服务单位负责人" prop="superintendent">
                    <el-input v-model="wuyeForms.superintendent" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">注：请填写物业服务单位的负责人或法人代表</span>
                </el-form-item>
                <el-form-item label="负责人联系电话" prop="contact">
                    <el-input v-model="wuyeForms.contact" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">注：请填写负责人的联系电话</span>
                </el-form-item>
                <el-form-item label="服务时间" style="width: 480px" prop="time">
                    <el-date-picker v-model="wuyeForms.time" type="daterange" range-separator="-"
                        start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        popper-class="date-style" />
                </el-form-item>
                <el-form-item label="合同物业费" prop="property">
                    <el-input v-model="wuyeForms.property" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px">元</span>
                </el-form-item>
                <el-form-item label="服务内容" prop="serveContent">
                    <el-input v-model="wuyeForms.serveContent" type="textarea" :rows="6" style="width: 360px;" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="wuyeForms.notes	" type="textarea" :rows="6" style="width: 360px;" />
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    getAllBgqList,
    getBuildingFloors,
    getQuanShuList,
    createQuanShu,
    updateQuanShu,
    deleteQuanShu,
    setPicture
} from '@/api/shujuchuli'
import {
    unitBuilding,
    buildingAll,
    addBuilding,
    cancelBuilding,
    editBuilding,
    buildingProperty,
    addBuildingProperty,
    editBuildingProperty,
    deteleBuildingProperty
} from '@/api/unit'
import {qsdjList} from '@/utils/constant'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import AMapLoader from '@amap/amap-jsapi-loader'; //引入

// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()
const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const form = ref({
    areaId: '',
    buildingId: '',
    floorIds: [],
    unitId: '',
    useState: ''
})
const currentIndex = ref(0)
function changeTab(index) {
    currentIndex.value = index
}
const dialog1 = ref(false)
const dialog1Title = ref('新增')
const isEdit = ref(false)
function addLouDong() {
    dialog1Title.value = '新增'
    isEdit.value = false
    dialog1.value = true
}
async function editLouDong(item) {
    console.log(item,'item')
    let unitBuildingId = item.id
    isEdit.value = true
    form.value = JSON.parse(JSON.stringify(item))
    let res1 = await buildingAll({ areaId: item.areaId })
    let res2 = await getBuildingFloors(item.buildingId)

    bglList.value = res1.result
    let bglObj = bglList.value.find(n => n.id == item.buildingId)
    form.value = Object.assign(form.value, bglObj)

    lcList.value = res2.result
    form.value.floorIds = item.floorIds.split(',').map(n=>Number(n))
    console.log(form.value, 'form.value')
    form.value.unitBuildingId = unitBuildingId
    dialog1Title.value = '基本信息'
    dialog1.value = true
}
function changeArea(val) {
    form.value.buildingId = ''
    form.value.floorIds = []
    buildingAll({ areaId: val }).then(res => {
        bglList.value = res.result
    })
}
function changeBgl(val) {
    form.value.floorIds = []
    let bglObj = bglList.value.find(item => item.id == val)
    form.value = Object.assign(bglObj, form.value)
    getBuildingFloors(val).then(res => {
        lcList.value = res.result
    })
}
const loudongForm = ref(null)
const enterDialog = async () => {
    loudongForm.value.validate(async (valid) => {
        if (valid) {
            console.log(form.value, 'form.value');
            if (Array.isArray(form.value.floorIds)) {
                form.value.floorIds = form.value.floorIds.join(',')
            }
            let res
            if (isEdit.value) {
                res = await editBuilding(form.value)
            } else {
                res = await addBuilding(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '编辑成功' : '添加成功!'
                })
                getUnitBuilding()
            }
            dialog1.value = false
        }
    })
}
const delUnit = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await cancelBuilding(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getUnitBuilding()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
function handleClose1() {
    dialog1.value = false
}
const searchInfo = ref({
    name: ''
})
function closeDialog1() {
    initForm1()
    dialog1.value = false
}
function initForm1() {
    loudongForm.value.resetFields()
    form.value = {}
}

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)

const rules = reactive({
    areaId: [{ required: true, message: '请选择办公区', trigger: 'change' }],
    buildingId: [{ required: true, message: '请选择办公楼', trigger: 'change' }],
    floorIds: [{ required: true, message: '请选择楼层', trigger: 'change' }],
    useState: [{ required: true, message: '请选择使用情况', trigger: 'change' }],
})
const quanshuRules = reactive({
    certificateNo: [{ required: true, message: '请输入产权证号', trigger: 'blur' }],
    obligee: [{ required: true, message: '请输入权利人', trigger: 'blur' }],
    commonSituation: [{ required: true, message: '请选择共有情况', trigger: 'change' }],
    buildingArea: [{ required: true, message: '请输入房屋建筑面积', trigger: 'blur' }]
})
const wuyeRules = reactive({
    certificateNo: [{ required: true, message: '请输入产权证号', trigger: 'blur' }],
})
const qyList = ref([])
const bglList = ref([])
const lcList = ref([])
const syqkList = ref([
    {
        name: '调配使用',
        id: 1
    },
    {
        name: '租用',
        id: 2
    },
    {
        name: '借用',
        id: 3
    },
    {
        name: '占用',
        id: 4
    },
    {
        name: '空置',
        id: 5
    }
])
const dialog2 = ref(false)
const isQuanShuEdit = ref(false)
const quanshuForms = ref({
    buildingArea: '',
    buildingId: '',
    certificateNo: '',
    commonSituation: '',
    erCode: '',
    landUseRightArea: '',
    map: '',
    obligee: '',
    otherRight: '',
    propertyCert: '',
    purpose: '',
    realEstateUnitNo: '',
    rightNature: '',
    rightType: '',
    serviceLife: '',
    splitting: ''
})
const quanshuTitle = ref('新增权属信息')
const handleClose2 = (done) => {
    dialog2.value = false
}
const idsParam = ref({
    buildingId: ''
})
const quanshuData = ref([])
const getQuanShuData = async () => {
    const res = await getQuanShuList(idsParam.value.buildingId)
    if (res.code == 200) {
        quanshuData.value = res.result
    }
}
const openQuanShu = (id) => {
    dialog2.value = true
    idsParam.value.buildingId = id
    getQuanShuData()
}
const addQuanShu = () => {
    quanshuTitle.value = '新增权属信息'
    isQuanShuEdit.value = false
    dialog3.value = true
}
const editQuanShu = async (row) => {
    isQuanShuEdit.value = true
    quanshuTitle.value = '修改权属信息'
    quanshuForms.value = JSON.parse(JSON.stringify(row))
    quanshuForms.value.ownershipId = quanshuForms.value.id
    if (quanshuForms.value.propertyCert) {
        fileList1.value = [{
            name: '1',
            url: quanshuForms.value.propertyCert
        }]
    }
    if (quanshuForms.value.map) {
        fileList2.value = [{
            name: '1',
            url: quanshuForms.value.map
        }]
    }
    if (quanshuForms.value.splitting) {
        fileList3.value = [{
            name: '1',
            url: quanshuForms.value.splitting
        }]
    }
    if (quanshuForms.value.erCode) {
        fileList4.value = [{
            name: '1',
            url: quanshuForms.value.erCode
        }]
    }
    dialog3.value = true
}
const delQuanShu = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteQuanShu(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getQuanShuData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
const dialog3 = ref(false)
const quanshuForm = ref(null)
const initQuanShuForm = () => {
    quanshuForm.value.resetFields()
    quanshuForms.value = {
        buildingArea: '',
        buildingId: '',
        certificateNo: '',
        commonSituation: '',
        erCode: '',
        landUseRightArea: '',
        map: '',
        obligee: '',
        otherRight: '',
        propertyCert: '',
        purpose: '',
        realEstateUnitNo: '',
        rightNature: '',
        rightType: '',
        serviceLife: '',
        splitting: ''
    }
    quanshuForms.value.buildingId = idsParam.value.buildingId
    fileList1.value = []
    fileList2.value = []
    fileList3.value = []
    fileList4.value = []
}
const handleClose3 = (done) => {
    dialog3.value = false
}
const closeDialog3 = () => {
    initQuanShuForm()
    dialog3.value = false
}
const enterDialog3 = async () => {
    quanshuForm.value.validate(async (valid) => {
        if (valid) {
            quanshuForms.value.buildingId = idsParam.value.buildingId
            let res
            if (isQuanShuEdit.value) {
                res = await updateQuanShu(quanshuForms.value)
            } else {
                res = await createQuanShu(quanshuForms.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isQuanShuEdit.value ? '编辑成功' : '添加成功!'
                })
                getQuanShuData()
            }
            initQuanShuForm()
            dialog3.value = false
        }
    })
}
const waiguanForm = ref(null)
const waiguanForms = ref({
    buildingId: '',
    picture: ''
})

const waiguanVisible = ref(false)

const openWaiGuan = (row) => {
    waiguanVisible.value = true
    waiguanForms.value.buildingId = row.buildingId
    if (row.picture) {
        fileList5.value = [{
            name: '1',
            url: row.picture
        }]
    }
}
const handleClose4 = () => {
    waiguanVisible.value = false
}
const closeDialog4 = () => {
    waiguanVisible.value = false
}

const enterDialog4 = () => {
    waiguanForm.value.validate(async (valid) => {
        if (valid) {
            let res = await setPicture(waiguanForms.value)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '添加成功!'
                })
                getUnitBuilding()
            }
            waiguanVisible.value = false
        }
    })
}
const dialog4 = ref(false)

const wuyeVisible = ref(false)
const wuyeForm = ref(null)
const wuyeForms = ref({
    name: '',
    time:[],
    contact:'',
    managerType:1,
    notes:'',
    property:'',
    serveContent:'',
    serveEnd:'',
    serveStart:'',
    superintendent:'',
    buildingId:''
})
const isWyEdit = ref(false)
const wuyeTitle = ref('新增物业信息')
function addWuYe(){
    wuyeVisible.value=true
}
function editWuYe(row){
    console.log(row,'roew')
    wuyeForms.value = JSON.parse(JSON.stringify(row))
    wuyeForms.value.propertyId = wuyeForms.value.id
    wuyeForms.value.time = [wuyeForms.value.serveStart,wuyeForms.value.serveEnd]
    isWyEdit.value = true
    wuyeTitle.value = '修改物业信息'
    wuyeVisible.value = true
}
function openWuYe(row) {
    wuyeForms.value.buildingId = row.buildingId
    getWuYeData()
    dialog4.value = true
}
const delWuYe = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deteleBuildingProperty(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getWuYeData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
function handleClose5(){
    wuyeVisible.value = false
}
function closeDialog5() {
    wuyeVisible.value = false
}
const wuyeData = ref([])
const getWuYeData = async () => {
    buildingProperty(wuyeForms.value.buildingId).then(res=>{
        wuyeData.value = res.result
    })
}
function handleClose7(){
    dialog4.value=false
}
const enterDialog5 = async () => {
    wuyeForm.value.validate(async (valid) => {
        if (valid) {
            wuyeForms.value.serveStart = wuyeForms.value.time[0]
            wuyeForms.value.serveEnd = wuyeForms.value.time[1]
            console.log(wuyeForms.value, 'form.value');
            let res
            if (isWyEdit.value) {
                res = await editBuildingProperty(wuyeForms.value)
            } else {
                res = await addBuildingProperty(wuyeForms.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isWyEdit.value ? '编辑成功' : '添加成功!'
                })
                getWuYeData()
            }
            wuyeVisible.value = false
        }
    })
}
const weizhiDialog = ref(false)

const handleClose6 = () => {
    mapInfo.value = {
        address: '',
        lng: '',
        lat: ''
    }
    weizhiDialog.value = false
}
const closeDialog6 = () => {
    mapInfo.value = {
        address: '',
        lng: '',
        lat: ''
    }
    weizhiDialog.value = false
}
const openWeiZhi = (item) => {
    weizhiDialog.value = true
    let location = item.administrative
    //初始化地图信息
    initMap(location)
}
const map = ref(null)
const AMaps = ref(null)
let geocoder = null; // 地图编码转换器
const initMap = (address) => {
    window._AMapSecurityConfig = {
        securityJsCode: "f84f4022a6c10294d1b19ff9b77c31c5",
    };
    AMapLoader.load({
        key: "c1c5d63a1bfa553591a271f0cb521fc1", //此处填入我们注册账号后获取的Key
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        AMaps.value = AMap
        console.log(AMaps.value, 'AMaps.value')
        geocoder = new AMap.Geocoder({
            city: address, // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        })
        geocoder.getLocation(address, function (status, result) {
            console.log(status, result, '3498')
            if (status === "complete" && result.info === "OK") {
                let location = [
                    result.geocodes[0].location.lng,
                    result.geocodes[0].location.lat,
                ];
                map.value = new AMap.Map("container", {
                    zoom: 12, //初始化地图层级
                    center: location, //初始化地图中心点
                }); // 展示地图 map
                map.value.on("click", function (e) {
                    var lngLat = e.lnglat;
                    mapInfo.value.lng = lngLat.lng;
                    mapInfo.value.lat = lngLat.lat;
                    // let marker = new AMap.Marker({
                    //     position: new AMap.LngLat(lng, lat)
                    // })
                    // this.map.clearMap()// 清除所有覆盖物（点标志）
                    // this.map.add(marker)// 添加点标志
                })
            }
        });
    }).catch(e => {
        console.log(e);
    })
}
const mapInfo = ref({
    address: '',
    lng: '',
    lat: ''
})

const search = () => {
    AMaps.value.plugin('AMap.PlaceSearch', () => {
        var placeSearch = new AMaps.value.PlaceSearch({
            map: map.value,
            pageSize: 1, // 单页显示结果条数
            pageIndex: 1, // 页码
            //autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        })
        placeSearch.search(mapInfo.value.address, function (status, result) {
            console.log(status, result, 'status, result')
            map.value.clearMap()// 清除所有覆盖物（点标志）
            var pois = result.poiList.pois;
            var poi = pois[0];
            var marker = new AMaps.value.Marker({
                position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: poi.name
            })
            map.value.add(marker)
            let infoWindow = new AMaps.value.InfoWindow({
                isCustom: true, //是否自定义信息窗体
                content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${poi.name}</div>`,
                closeWhenClickMap: true,
                zIndex: 999,
                offset: new AMaps.value.Pixel(16, -35)
            });
            infoWindow.open(map.value, marker.getPosition());
            map.value.setFitView();

            // mapInfo.value.lng = lngLat.lng;
            // mapInfo.value.lat = lngLat.lat;
            // marker添加地图上
            // marker.value = new AMaps.value.Marker({
            //     position: [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]
            // });
            // const infoWindow = new AMaps.value.InfoWindow({
            //     content: `<div style="">${result.poiList.pois[0].name}</div>`, // 设置气泡内容
            //     offset: new AMaps.value.Pixel(0, -30) // 设置气泡偏移量，使其位于标记点正上方
            // });
            // infoWindow.open(map.value, marker.value.getPosition()); // 在地图上打开信息窗口，并指定打开的位置为标记点的位置
            //map.value.add(marker.value); //添加到地图
        })
    })
}
const ldTabs = ref([])
const ldData = ref([])
function getUnitBuilding() {
    unitBuilding().then(res => {
        if (res.result) {
            ldData.value = res.result
            ldTabs.value = res.result.map(item => item.name)
            console.log(ldTabs.value,'ldTabs.value')
        }
    })
}
onMounted(() => {
    if (localStorage.getItem('userInfo')) {
        form.value.unitId = JSON.parse(localStorage.getItem('userInfo')).unitId
    }
    getAllBgqList().then(res => {
        qyList.value = res.result
    })
    getUnitBuilding()
})

let dialogVisible = ref(false)
let dialogImageUrl = ref()

//图片预览
const handlePicturePreview = (file, files) => {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true
}
const fileList1 = ref([])
const handleRemove1 = (file) => {
    fileList1.value = []
    quanshuForms.value.propertyCert = ''
}
const uploadSuccess1 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message:res.message
        })
        fileList1.value.pop()
        return
    }
    quanshuForms.value.propertyCert = res.result
}
const fileList2 = ref([])
const handleRemove2 = (file) => {
    fileList2.value = []
    quanshuForms.value.map = ''
}
const uploadSuccess2 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList2.value.pop()
        return
    }
    quanshuForms.value.map = res.result
}
const fileList3 = ref([])
const handleRemove3 = (file) => {
    fileList3.value = []
    quanshuForms.value.splitting = ''
}
const uploadSuccess3 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList3.value.pop()
        return
    }
    quanshuForms.value.splitting = res.result
}
const fileList4 = ref([])
const handleRemove4 = (file) => {
    fileList4.value = []
    quanshuForms.value.erCode = ''
}
const uploadSuccess4 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList4.value.pop()
        return
    }
    quanshuForms.value.erCode = res.result
}
const fileList5 = ref([])
const handleRemove5 = (file) => {
    fileList5.value = []
    waiguanForms.value.picture = ''
}
const uploadSuccess5 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList5.value.pop()
        return
    }
    waiguanForms.value.picture = res.result
    waiguanForm.value.validateField('picture')
}

const buildingStructs = ref([
    {
        label: '框架结构（框剪结构）',
        value: 1
    },
    {
        label: '砖木',
        value: 2
    },
    {
        label: '砖混',
        value: 3
    },
    {
        label: '钢结构',
        value: 4
    }
])
</script>

<style lang="scss" scoped>
.bglxx {
    background: #fff;
    padding: 10px;

    .tabs {
        border: 1px solid #e2e4e8;
        border-bottom: none;
        display: flex;
        height: 40px;
        line-height: 40px;
        background: #edf3fa;

        .tab {
            color: #999;
            cursor: pointer;
            padding: 0 15px;
        }

        .active {
            color: #fff;
            background: #508ee5;
        }
    }

    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        padding: 10px;

        .title {
            font-size: 18px;
            color: #333;
            margin-right: 10px;
        }
    }

    .content {
        display: flex;
        border: 1px solid #e2e4e8;
        padding: 10px;

        .img {
            width: 360px;
            height: 218px;
            margin-right: 20px;
        }

        .right {
            flex: 1;

            .jbxx,
            .syxx {
                .row1 {
                    font-size: 12px;
                    color: #666;
                    font-weight: bold;
                    margin-bottom: 14px;
                }

                .row2 {
                    display: flex;

                    .item {
                        flex: 1;
                    }

                    .label {
                        font-size: 12px;
                        color: #999;
                        margin-bottom: 14px;
                    }

                    .value {
                        color: #666;
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }

            .syxx {
                margin-top: 26px;
            }
        }
    }

    .btns {
        border: 1px solid #e2e4e8;
        border-top: none;
        padding: 14px 0;
        display: flex;

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #e2e4e8;
            cursor: pointer;

            .icon {}
        }
    }
}

.loudong-drawer {
    .section-title {
        font-weight: bold;
        font-size: 20px;
        line-height: 33px;
        padding: 8px 0 4px 14px;
        color: #4E7DFD;
        border-bottom: 1px solid #E7ECF1;
        position: relative;
        margin-bottom: 20px;
    }

    .section-title:before {
        content: '';
        position: absolute;
        top: 17px;
        left: 0;
        width: 6px;
        height: 14px;
        border-radius: 3px;
        background: #4E7DFD;
    }
}

.quanshu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #E7ECF1;

    div {
        font-size: 20px;
    }

    .section-title {
        margin: 0;
        border: none;
    }
}

#container {
    width: 100%;
    height: 100%;
}
</style>


<style lang="scss">
.date-style {
    :deep .el-date-editor {
        width: 200px;
    }
}
</style>